<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>动态props</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <parent></parent>
    </div>
    <script>
      // 创建根实例
      new Vue({
        el: "#app",
        components: {
          parent: {
            template: `
                <div>
                    <child :app-para="data1"></child>
                    <child :app-para="data2"></child>
                </div>`,
            components: {
              child: {
                props: ["appPara"],
                template: "<h1>{{ appPara }}</h1>",
              },
            },
            data() {
              return {
                data1: "abc",
                data2: "123",
              };
            },
          },
        },
      });
    </script>
  </body>
</html>
